<template xmlns:v-popover="http://www.w3.org/1999/xhtml">
  <div class="editDiv">
    <el-popover
      ref="popover"
      placement="bottom-start"
      width="351"
      trigger="click"
      popper-class="wx_emojis"
      :disabled="disabledEmoji">
      <ul class="emotions" onselectstart="return false;" @click="handleSelectEmoji">
        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_0" data-title="[微笑]" style="background-position:0 -0px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_1" data-title="[撇嘴]" style="background-position:0 -20px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_2" data-title="[色]" style="background-position:0 -40px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_3" data-title="[发呆]" style="background-position:0 -60px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_4" data-title="[得意]" style="background-position:0 -80px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_5" data-title="[流泪]" style="background-position:0 -100px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_6" data-title="[害羞]" style="background-position:0 -120px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_7" data-title="[闭嘴]" style="background-position:0 -140px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_8" data-title="[睡]" style="background-position:0 -160px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_9" data-title="[大哭]" style="background-position:0 -180px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_10" data-title="[尴尬]" style="background-position:0 -200px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_11" data-title="[发怒]" style="background-position:0 -220px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_12" data-title="[调皮]" style="background-position:0 -240px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_13" data-title="[呲牙]" style="background-position:0 -260px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_14" data-title="[惊讶]" style="background-position:0 -280px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_15" data-title="[难过]" style="background-position:0 -300px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_17" data-title="[冷汗]" style="background-position:0 -320px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_18" data-title="[抓狂]" style="background-position:0 -340px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_19" data-title="[吐]" style="background-position:0 -360px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_20" data-title="[偷笑]" style="background-position:0 -380px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_21" data-title="[愉快]" style="background-position:0 -400px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_22" data-title="[白眼]" style="background-position:0 -420px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_23" data-title="[傲慢]" style="background-position:0 -440px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_25" data-title="[困]" style="background-position:0 -460px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_26" data-title="[惊恐]" style="background-position:0 -480px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_27" data-title="[流汗]" style="background-position:0 -500px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_28" data-title="[憨笑]" style="background-position:0 -520px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_29" data-title="[悠闲]" style="background-position:0 -540px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_30" data-title="[奋斗]" style="background-position:0 -560px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_31" data-title="[咒骂]" style="background-position:0 -580px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_32" data-title="[疑问]" style="background-position:0 -600px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_33" data-title="[嘘]" style="background-position:0 -620px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_34" data-title="[晕]" style="background-position:0 -640px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_36" data-title="[衰]" style="background-position:0 -660px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_37" data-title="[骷髅]" style="background-position:0 -680px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_38" data-title="[敲打]" style="background-position:0 -700px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_39" data-title="[再见]" style="background-position:0 -720px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_40" data-title="[擦汗]" style="background-position:0 -740px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_41" data-title="[抠鼻]" style="background-position:0 -760px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_42" data-title="[鼓掌]" style="background-position:0 -780px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_44" data-title="[坏笑]" style="background-position:0 -800px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_45" data-title="[左哼哼]" style="background-position:0 -820px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_46" data-title="[右哼哼]" style="background-position:0 -840px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_47" data-title="[哈欠]" style="background-position:0 -860px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_48" data-title="[鄙视]" style="background-position:0 -880px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_49" data-title="[委屈]" style="background-position:0 -900px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_50" data-title="[快哭了]" style="background-position:0 -920px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_51" data-title="[阴险]" style="background-position:0 -940px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_52" data-title="[亲亲]" style="background-position:0 -960px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_54" data-title="[可怜]" style="background-position:0 -980px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_55" data-title="[菜刀]" style="background-position:0 -1000px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_56" data-title="[西瓜]" style="background-position:0 -1020px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_57" data-title="[啤酒]" style="background-position:0 -1040px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_60" data-title="[咖啡]" style="background-position:0 -1060px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_62" data-title="[猪头]" style="background-position:0 -1080px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_63" data-title="[玫瑰]" style="background-position:0 -1100px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_64" data-title="[凋谢]" style="background-position:0 -1120px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_65" data-title="[嘴唇]" style="background-position:0 -1140px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_66" data-title="[爱心]" style="background-position:0 -1160px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_67" data-title="[心碎]" style="background-position:0 -1180px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_68" data-title="[蛋糕]" style="background-position:0 -1200px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_70" data-title="[炸弹]" style="background-position:0 -1220px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_74" data-title="[便便]" style="background-position:0 -1240px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_75" data-title="[月亮]" style="background-position:0 -1260px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_76" data-title="[太阳]" style="background-position:0 -1280px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_78" data-title="[拥抱]" style="background-position:0 -1300px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_79" data-title="[强]" style="background-position:0 -1320px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_80" data-title="[弱]" style="background-position:0 -1340px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_81" data-title="[握手]" style="background-position:0 -1360px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_82" data-title="[胜利]" style="background-position:0 -1380px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_83" data-title="[抱拳]" style="background-position:0 -1400px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_84" data-title="[勾引]" style="background-position:0 -1420px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_85" data-title="[拳头]" style="background-position:0 -1440px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_89" data-title="[OK]" style="background-position:0 -1460px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_92" data-title="[跳跳]" style="background-position:0 -1480px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_93" data-title="[发抖]" style="background-position:0 -1500px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_94" data-title="[怄火]" style="background-position:0 -1520px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_95" data-title="[转圈]" style="background-position:0 -1540px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_emoji_ios_0" data-title="😄" style="background-position:0 -1560px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_emoji_ios_1" data-title="😷" style="background-position:0 -1580px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_emoji_ios_2" data-title="😂" style="background-position:0 -1600px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_emoji_ios_3" data-title="😝" style="background-position:0 -1620px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_emoji_ios_4" data-title="😳" style="background-position:0 -1640px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_emoji_ios_5" data-title="😱" style="background-position:0 -1660px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_emoji_ios_6" data-title="😔" style="background-position:0 -1680px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_emoji_ios_7" data-title="😒" style="background-position:0 -1700px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_emoji_wx_4" data-title="[嘿哈]" style="background-position:0 -1720px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_emoji_wx_5" data-title="[捂脸]" style="background-position:0 -1740px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_emoji_wx_2" data-title="[奸笑]" style="background-position:0 -1760px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_emoji_wx_6" data-title="[机智]" style="background-position:0 -1780px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_emoji_wx_12" data-title="[皱眉]" style="background-position:0 -1800px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_emoji_wx_11" data-title="[耶]" style="background-position:0 -1820px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_emoji_ios_8" data-title="👻" style="background-position:0 -1840px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_emoji_ios_9" data-title="🙏" style="background-position:0 -1860px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_emoji_ios_10" data-title="💪" style="background-position:0 -1880px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_emoji_ios_11" data-title="🎉" style="background-position:0 -1900px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_emoji_ios_12" data-title="[礼物]" style="background-position:0 -1920px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_emoji_wx_9" data-title="[红包]" style="background-position:0 -1940px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="icon_emoji_wx_14" data-title="[鸡]" style="background-position:0 -1960px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="" data-title="" style="background-position:0 -2660px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="" data-title="" style="background-position:0 -2660px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="" data-title="" style="background-position:0 -2660px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="" data-title="" style="background-position:0 -2660px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="" data-title="" style="background-position:0 -2660px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="" data-title="" style="background-position:0 -2660px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="" data-title="" style="background-position:0 -2660px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="" data-title="" style="background-position:0 -2660px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="" data-title="" style="background-position:0 -2660px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="" data-title="" style="background-position:0 -2660px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="" data-title="" style="background-position:0 -2660px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="" data-title="" style="background-position:0 -2660px;"></span>
        </li>

        <li class="emotions_item">
          <span class="icon_emotion_sprite js_emotion_i" data-name="" data-title="" style="background-position:0 -2660px;"></span>
        </li>
      </ul>
    </el-popover>
    <el-popover
      ref="popover2"
      v-model="visible2"
      placement="bottom-start"
      trigger="click"
      @show="handleEditLink">
      <el-form label-width="40px">
        <el-form-item label="文本" style="margin-bottom:6px"><el-input v-model="linkText" type="text" size="small"></el-input></el-form-item>
        <el-form-item label="链接" style="margin-bottom:6px"><el-input v-model="link" type="text" size="small"></el-input></el-form-item>
        <el-form-item style="margin-bottom:6px"><el-button type="primary" size="small" @click="handleAddLink">确认</el-button></el-form-item>
      </el-form>
    </el-popover>
    <div id="editDiv" ref="text" class="editor-text" v-html="html" contenteditable="true" @click="handleClick" @keyup="handleResetRange" @keydown="handlekeydown">
    </div>
    <div class="emojiBox">
      <i class="icon icon-biaoqing"  v-popover:popover title="表情"></i>
      <i class="icon icon-lianjie" v-popover:popover2 title="链接"></i>
    </div>
  </div>
</template>
<script>
  export default {
    props: ['html'],
    data () {
      return {
        link: null,
        linkText: null,
        visible: false,
        visible2: false,
        showEmotions: false,
        targetLink: null,       // 编辑链接目标元素，如果属于编辑链接状态
        disabledEmoji: false    // 当处于编辑链接状态时，禁用emoji，不允许链接标题插入emoji
      }
    },
    mounted () {
    },
    methods: {
      isLink () {
        const container = this.rangeContainer
        return container && container.parentNode && container.parentNode.nodeName === 'A'
      },
      isAtLinkEnd () {
        return this.isLink() && this.rangeOffset === this.rangeContainer.nodeValue.length
      },
      handleEditLink () {
        let isEdit = this.isLink() && !this.isAtLinkEnd()
        if (isEdit) {
          this.targetLink = this.rangeContainer.parentNode
          this.link = this.targetLink.getAttribute('href')
          this.linkText = this.targetLink.innerHTML
        } else {
          this.targetLink = null
          this.link = ''
          this.linkText = ''
        }
      },
      handleClick () {
        this.handleResetRange()
        if (this.isLink() && !this.isAtLinkEnd()) {
          this.visible2 = true
          this.disabledEmoji = true
        } else {
          this.disabledEmoji = false
        }
      },
      handleResetRange (e) {
        this.selection = getSelection()
        this.range = this.selection.getRangeAt(0)
        this.rangeOffset = this.range.startOffset
        this.rangeContainer = this.range.startContainer
        this.$emit('change')
      },
      handlekeydown (e) {
        this.handleResetRange()
        if (e.keyCode === 13) {
          e.preventDefault()
          const br = document.createElement('br')
          const br2 = document.createElement('br')
          const editDiv = document.getElementById('editDiv')
          if (this.rangeContainer.nodeType === 3) {
            const text = this.rangeContainer.nodeValue
            const textL = document.createTextNode(text.slice(0, this.rangeOffset))
            const textR = document.createTextNode(text.slice(this.rangeOffset))
            editDiv.insertBefore(textL, this.rangeContainer)
            editDiv.insertBefore(br, this.rangeContainer)
            if (this.rangeContainer.nextElementSibling === null) {
              editDiv.insertBefore(br2, this.rangeContainer)
            }
            editDiv.insertBefore(textR, this.rangeContainer)
            this.rangeContainer.remove()
          } else {
            if (this.rangeContainer.childNodes.length === 0) {
              this.rangeContainer.appendChild(br)
              this.rangeContainer.appendChild(br2)
            } else {
              this.insertAfter(br, this.rangeContainer.childNodes[this.rangeOffset - 1])
            }
          }
          let range = document.createRange()
          range.setStart(editDiv, this.index(br) + 1)
          this.selection.removeAllRanges()
          this.selection.addRange(range)
          this.$emit('change')
        }
      },
      handleSelectEmoji (e) {
        if (!this.selection || e.target.nodeName !== 'SPAN') {
          return false
        }
        const eName = e.target.getAttribute('data-name')
        const emojiObj = document.createElement('img')
        emojiObj.src = 'https://mp.weixin.qq.com/mpres/zh_CN/htmledition/comm_htmledition/images/pic/common/pic_blank.gif'
        emojiObj.className = 'icon_emotion_single ' + eName
        emojiObj.setAttribute('data-title', e.target.getAttribute('data-title'))
        this.insert(emojiObj)
      },
      handleAddLink (e) {
        const $a = this.targetLink || document.createElement('a')
        $a.innerHTML = this.linkText
        // $a.setAttribute('title', this.link)
        $a.setAttribute('href', this.link)
        !this.targetLink && this.insert($a)
        this.visible2 = false
      },
      insert ($el) {
        const editDiv = document.getElementById('editDiv')
        if (this.rangeContainer.nodeType === 3) {
          const parent = this.rangeContainer.parentNode
          if (this.isAtLinkEnd()) {
            this.insertAfter($el, parent)
          } else {
            const text = this.rangeContainer.nodeValue
            const textL = document.createTextNode(text.slice(0, this.rangeOffset))
            const textR = document.createTextNode(text.slice(this.rangeOffset))
            parent.insertBefore(textL, this.rangeContainer)
            parent.insertBefore($el, this.rangeContainer)
            parent.insertBefore(textR, this.rangeContainer)
            this.rangeContainer.remove()
          }
        } else {
          if (this.rangeContainer.childNodes.length === 0) {
            this.rangeContainer.appendChild($el)
          } else {
            this.insertAfter($el, this.rangeContainer.childNodes[this.rangeOffset - 1])
          }
        }
        let range = document.createRange()
        range.setStart(editDiv, this.index($el) + 1)
        this.selection.removeAllRanges()
        this.selection.addRange(range)
        this.handleResetRange()
        this.$emit('change')
      },
      insertAfter (newElement, targetElement) {
        var parent = targetElement.parentNode
        if (parent.lastChild === targetElement) {
          parent.appendChild(newElement)
        } else {
          parent.insertBefore(newElement, targetElement.nextSibling)
        }
      },
      index (ele) {
        let i = 0
        while (ele.previousSibling) {
          ele = ele.previousSibling
          i++
        }
        return i
      },
      getContent () {
        return this.$refs.text.innerHTML
      }
    }
  }
</script>
<style lang="scss">
  .wx_emojis{width:500px;}
  .editDiv,.wx_emojis{
    .editor-text{min-height: 188px;max-height: 235px;outline:0;overflow-y: auto;}
    .emotions_item {
      float: left;
      width: 24px;
      height: 24px;
      line-height: 24px;
      font-size: 0;
      text-align: center;
      border-bottom: 1px solid #c0bfc5;
      border-left: 1px solid #c0bfc5;
      background-color: #fff
    }
    .icon_emotion_sprite {
      cursor: pointer;
      width: 20px;
      height: 20px;
      vertical-align: middle;
      display: inline-block;
      background: transparent url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/icon_emotion_panel.2x37e205.png) no-repeat 0 0;
      -webkit-background-size: 20px auto;
      background-size: 20px auto
    }
    .icon_emotion_single {
        width: 20px;
        height: 20px;
        vertical-align: middle;
        display: inline-block;
        -webkit-background-size: 20px auto;
        background-size: 20px auto
    }
    .emojiBox{
      &{position:relative;margin-bottom:-15px;height:36px;line-height:36px;border-top:1px solid #e7e7eb}
      .icon{font-size:20px;cursor:pointer}
    }
    .emotions{border-top: 1px solid #c0bfc5;border-right: 1px solid #c0bfc5;overflow: hidden;z-index: 999;}
    .icon_smiley_0 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_037e205.png)}
    .icon_smiley_1 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_137e205.png)}
    .icon_smiley_2 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_237e205.png)}
    .icon_smiley_3 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_337e205.png)}
    .icon_smiley_4 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_437e205.png)}
    .icon_smiley_5 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_537e205.png)}
    .icon_smiley_6 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_637e205.png)}
    .icon_smiley_7 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_737e205.png)}
    .icon_smiley_8 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_837e205.png)}
    .icon_smiley_9 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_937e205.png)}
    .icon_smiley_10 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_1037e205.png)}
    .icon_smiley_11 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_1137e205.png)}
    .icon_smiley_12 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_1237e205.png)}
    .icon_smiley_13 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_1337e205.png)}
    .icon_smiley_14 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_1437e205.png)}
    .icon_smiley_15 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_1537e205.png)}
    .icon_smiley_16 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_1637e205.png)}
    .icon_smiley_17 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_1737e205.png)}
    .icon_smiley_18 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_1837e205.png)}
    .icon_smiley_19 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_1937e205.png)}
    .icon_smiley_20 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_2037e205.png)}
    .icon_smiley_21 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_2137e205.png)}
    .icon_smiley_22 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_2237e205.png)}
    .icon_smiley_23 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_2337e205.png)}
    .icon_smiley_24 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_2437e205.png)}
    .icon_smiley_25 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_2537e205.png)}
    .icon_smiley_26 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_2637e205.png)}
    .icon_smiley_27 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_2737e205.png)}
    .icon_smiley_28 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_2837e205.png)}
    .icon_smiley_29 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_2937e205.png)}
    .icon_smiley_30 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_3037e205.png)}
    .icon_smiley_31 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_3137e205.png)}
    .icon_smiley_32 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_3237e205.png)}
    .icon_smiley_33 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_3337e205.png)}
    .icon_smiley_34 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_3437e205.png)}
    .icon_smiley_35 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_3537e205.png)}
    .icon_smiley_36 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_3637e205.png)}
    .icon_smiley_37 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_3737e205.png)}
    .icon_smiley_38 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_3837e205.png)}
    .icon_smiley_39 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_3937e205.png)}
    .icon_smiley_40 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_4037e205.png)}
    .icon_smiley_41 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_4137e205.png)}
    .icon_smiley_42 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_4237e205.png)}
    .icon_smiley_43 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_4337e205.png)}
    .icon_smiley_44 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_4437e205.png)}
    .icon_smiley_45 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_4537e205.png)}
    .icon_smiley_46 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_4637e205.png)}
    .icon_smiley_47 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_4737e205.png)}
    .icon_smiley_48 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_4837e205.png)}
    .icon_smiley_49 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_4937e205.png)}
    .icon_smiley_50 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_5037e205.png)}
    .icon_smiley_51 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_5137e205.png)}
    .icon_smiley_52 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_5237e205.png)}
    .icon_smiley_53 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_5337e205.png)}
    .icon_smiley_54 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_5437e205.png)}
    .icon_smiley_55 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_5537e205.png)}
    .icon_smiley_56 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_5637e205.png)}
    .icon_smiley_57 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_5737e205.png)}
    .icon_smiley_58 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_5837e205.png)}
    .icon_smiley_59 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_5937e205.png)}
    .icon_smiley_60 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_6037e205.png)}
    .icon_smiley_61 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_6137e205.png)}
    .icon_smiley_62 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_6237e205.png)}
    .icon_smiley_63 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_6337e205.png)}
    .icon_smiley_64 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_6437e205.png)}
    .icon_smiley_65 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_6537e205.png)}
    .icon_smiley_66 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_6637e205.png)}
    .icon_smiley_67 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_6737e205.png)}
    .icon_smiley_68 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_6837e205.png)}
    .icon_smiley_69 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_6937e205.png)}
    .icon_smiley_70 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_7037e205.png)}
    .icon_smiley_71 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_7137e205.png)}
    .icon_smiley_72 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_7237e205.png)}
    .icon_smiley_73 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_7337e205.png)}
    .icon_smiley_74 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_7437e205.png)}
    .icon_smiley_75 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_7537e205.png)}
    .icon_smiley_76 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_7637e205.png)}
    .icon_smiley_77 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_7737e205.png)}
    .icon_smiley_78 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_7837e205.png)}
    .icon_smiley_79 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_7937e205.png)}
    .icon_smiley_80 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_8037e205.png)}
    .icon_smiley_81 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_8137e205.png)}
    .icon_smiley_82 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_8237e205.png)}
    .icon_smiley_83 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_8337e205.png)}
    .icon_smiley_84 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_8437e205.png)}
    .icon_smiley_85 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_8537e205.png)}
    .icon_smiley_86 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_8637e205.png)}
    .icon_smiley_87 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_8737e205.png)}
    .icon_smiley_88 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_8837e205.png)}
    .icon_smiley_89 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_8937e205.png)}
    .icon_smiley_90 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_9037e205.png)}
    .icon_smiley_91 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_9137e205.png)}
    .icon_smiley_92 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_9237e205.png)}
    .icon_smiley_93 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_9337e205.png)}
    .icon_smiley_94 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_9437e205.png)}
    .icon_smiley_95 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_9537e205.png)}
    .icon_smiley_96 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_9637e205.png)}
    .icon_smiley_97 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_9737e205.png)}
    .icon_smiley_98 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_9837e205.png)}
    .icon_smiley_99 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_9937e205.png)}
    .icon_smiley_100 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_10037e205.png)}
    .icon_smiley_101 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_10137e205.png)}
    .icon_smiley_102 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_10237e205.png)}
    .icon_smiley_103 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_10337e205.png)}
    .icon_smiley_104 {background-image: url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_10437e205.png)}
    .icon_emoji_wx_2 {background-image: url(https://res.wx.qq.com/mpres/zh_CN/htmledition/pages/modules/common/emoji/images/emoji_wx/2_02.png);}
    .icon_emoji_ios_0 {background-image: url(https://res.wx.qq.com/mpres/zh_CN/htmledition/pages/modules/common/emoji/images/emoji_ios/u1F604.png);}
    .icon_emoji_ios_1 {background-image: url(https://res.wx.qq.com/mpres/zh_CN/htmledition/pages/modules/common/emoji/images/emoji_ios/u1F637.png);}
    .icon_emoji_ios_2 {background-image: url(https://res.wx.qq.com/mpres/zh_CN/htmledition/pages/modules/common/emoji/images/emoji_ios/u1F602.png);}
    .icon_emoji_ios_3 {background-image: url(https://res.wx.qq.com/mpres/zh_CN/htmledition/pages/modules/common/emoji/images/emoji_ios/u1F61D.png);}
    .icon_emoji_ios_4 {background-image: url(https://res.wx.qq.com/mpres/zh_CN/htmledition/pages/modules/common/emoji/images/emoji_ios/u1F633.png);}
    .icon_emoji_ios_5 {background-image: url(https://res.wx.qq.com/mpres/zh_CN/htmledition/pages/modules/common/emoji/images/emoji_ios/u1F631.png);}
    .icon_emoji_ios_6 {background-image: url(https://res.wx.qq.com/mpres/zh_CN/htmledition/pages/modules/common/emoji/images/emoji_ios/u1F614.png);}
    .icon_emoji_ios_7 {background-image: url(https://res.wx.qq.com/mpres/zh_CN/htmledition/pages/modules/common/emoji/images/emoji_ios/u1F612.png);}
    .icon_emoji_wx_4 {background-image: url(https://res.wx.qq.com/mpres/zh_CN/htmledition/pages/modules/common/emoji/images/emoji_wx/2_04.png);}
    .icon_emoji_wx_5 {background-image: url(https://res.wx.qq.com/mpres/zh_CN/htmledition/pages/modules/common/emoji/images/emoji_wx/2_05.png);}
    .icon_emoji_wx_6 {background-image: url(https://res.wx.qq.com/mpres/zh_CN/htmledition/pages/modules/common/emoji/images/emoji_wx/2_06.png);}
    .icon_emoji_wx_12 {background-image: url(https://res.wx.qq.com/mpres/zh_CN/htmledition/pages/modules/common/emoji/images/emoji_wx/2_12.png);}
    .icon_emoji_wx_11 {background-image: url(https://res.wx.qq.com/mpres/zh_CN/htmledition/pages/modules/common/emoji/images/emoji_wx/2_11.png);}
    .icon_emoji_ios_8 {background-image: url(https://res.wx.qq.com/mpres/zh_CN/htmledition/pages/modules/common/emoji/images/emoji_ios/u1F47B.png);}
    .icon_emoji_ios_9 {background-image: url(https://res.wx.qq.com/mpres/zh_CN/htmledition/pages/modules/common/emoji/images/emoji_ios/u1F64F.0.png);}
    .icon_emoji_ios_10 {background-image: url(https://res.wx.qq.com/mpres/zh_CN/htmledition/pages/modules/common/emoji/images/emoji_ios/u1F4AA.0.png);}
    .icon_emoji_ios_11 {background-image: url(https://res.wx.qq.com/mpres/zh_CN/htmledition/pages/modules/common/emoji/images/emoji_ios/u1F389.png);}
    .icon_emoji_ios_12 {background-image: url(https://res.wx.qq.com/mpres/zh_CN/htmledition/pages/modules/common/emoji/images/emoji_ios/u1F381.png);}
    .icon_emoji_wx_9 {background-image: url(https://res.wx.qq.com/mpres/zh_CN/htmledition/pages/modules/common/emoji/images/emoji_wx/2_09.png);}
    .icon_emoji_wx_14 {background-image: url(https://res.wx.qq.com/mpres/zh_CN/htmledition/pages/modules/common/emoji/images/emoji_wx/2_14.png);}


  }
</style>
